<template>
  <div class="content-box">
    <Swiper ref="swiperRef" :autoplay="false" :showIndicators="false">
      <SwiperItem v-for="slide in slides" :key="slide.id">
        <div class="boxItem" :day="`${lang.day} ${slide.day}`">
          <div class="top">
            <div class="head">
              <p>
                {{ lang.box_deposit_requirement }}
                <span>{{ userStore.moneyUnit }} {{ slide.requirement }}</span>
              </p>
              <p>
                {{ lang.box_my_deposit }}
                <span>{{ userStore.moneyUnit }} {{ slide.myDeposit }}</span>
              </p>
              <NuxtImg
                :src="assets.radio"
                alt="MysteriousBox.statusIndicator"
                class="radio"
              />
            </div>
            <div class="body">
              <div class="title">{{ lang.day }} {{ slide.day }}</div>
              <NuxtImg
                :src="assets.base"
                alt="MysteriousBox.baseImage"
                class="Base"
              />
              <NuxtImg
                :src="slide.boxImg"
                alt="MysteriousBox.mysteryBox"
                class="box"
              />
              <div class="bouns">
                {{ userStore.moneyUnit }} {{ slide.bonus }}
              </div>
              <button
                class="btn"
                :class="{ noCheck: slide.disabled }"
                :disabled="slide.disabled"
              >
                {{ lang.box_open }}
              </button>
            </div>
          </div>
          <div class="bottom">
            <div class="tableHead">
              <div>{{ lang.box_bets }}</div>
              <div>{{ lang.box_prizes }}</div>
            </div>
            <div class="tableBody">
              <div>
                <div
                  class="item"
                  v-for="(row, rIndex) in slide.tiers"
                  :key="rIndex"
                >
                  <div>{{ userStore.moneyUnit }} {{ row.bet }}</div>
                  <div>{{ userStore.moneyUnit }} {{ row.prize }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </SwiperItem>
    </Swiper>
    <!-- 翻页箭头 -->
    <div class="prev-img arrow-img" v-click-move @click="goPrev">
      <NuxtImg :src="assets.arrow" />
    </div>
    <div class="next-img arrow-img" v-click-move @click="goNext">
      <NuxtImg :src="assets.arrow" />
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  baseData: any;
}>();

const lang: any = getCurrentPageLang("activity/tesouro");

const userStore = useUserStore();

const assets = {
  radio: "/images/activity/tesouro/radio.png",
  base: "/images/activity/tesouro/Base.png",
  arrow: "/images/activity/tesouro/arr.png",
};

const swiperRef = ref<{ next: () => void; prev: () => void } | null>(null);
props.baseData.swiperRef = swiperRef;
function goNext() {
  swiperRef.value?.next();
}
function goPrev() {
  swiperRef.value?.prev();
}

const slides: any[] = [
  {
    id: 2,
    day: 2,
    requirement: "20",
    myDeposit: "0",
    boxImg: "/images/activity/tesouro/MysteriousBoxClose0.png",
    bonus: "1~77",
    disabled: true,
    tiers: [
      { bet: "20", prize: "1~77" },
      { bet: "1000", prize: "2~177" },
      { bet: "1200", prize: "3~277" },
      { bet: "2500", prize: "6~577" },
      { bet: "5000", prize: "10~777" },
      { bet: "50000", prize: "50~1777" },
      { bet: "100000", prize: "100~7777" },
    ],
  },
  {
    id: 3,
    day: 3,
    requirement: "33",
    myDeposit: "0",
    boxImg: "/images/activity/tesouro/MysteriousBoxClose1.png",
    bonus: "1~77",
    disabled: true,
    tiers: [
      { bet: "20", prize: "1~77" },
      { bet: "1000", prize: "2~177" },
      { bet: "1200", prize: "3~277" },
      { bet: "2500", prize: "6~577" },
      { bet: "5000", prize: "10~777" },
      { bet: "50000", prize: "50~1777" },
      { bet: "100000", prize: "100~7777" },
    ],
  },
  {
    id: 4,
    day: 4,
    requirement: "44",
    myDeposit: "0",
    boxImg: "/images/activity/tesouro/MysteriousBoxClose2.png",
    bonus: "1~77",
    disabled: true,
    tiers: [
      { bet: "20", prize: "1~77" },
      { bet: "1000", prize: "2~177" },
      { bet: "1200", prize: "3~277" },
      { bet: "2500", prize: "6~577" },
      { bet: "5000", prize: "10~777" },
      { bet: "50000", prize: "50~1777" },
      { bet: "100000", prize: "100~7777" },
    ],
  },
  {
    id: 5,
    day: 5,
    requirement: "55",
    myDeposit: "0",
    boxImg: "/images/activity/tesouro/MysteriousBoxClose3.png",
    bonus: "1~77",
    disabled: true,
    tiers: [
      { bet: "20", prize: "1~77" },
      { bet: "1000", prize: "2~177" },
      { bet: "1200", prize: "3~277" },
      { bet: "2500", prize: "6~577" },
      { bet: "5000", prize: "10~777" },
      { bet: "50000", prize: "50~1777" },
      { bet: "100000", prize: "100~7777" },
    ],
  },
  {
    id: 6,
    day: 6,
    requirement: "66",
    myDeposit: "0",
    boxImg: "/images/activity/tesouro/MysteriousBoxClose4.png",
    bonus: "1~77",
    disabled: true,
    tiers: [
      { bet: "20", prize: "1~77" },
      { bet: "1000", prize: "2~177" },
      { bet: "1200", prize: "3~277" },
      { bet: "2500", prize: "6~577" },
      { bet: "5000", prize: "10~777" },
      { bet: "50000", prize: "50~1777" },
      { bet: "100000", prize: "100~7777" },
    ],
  },
  {
    id: 7,
    day: 7,
    requirement: "77",
    myDeposit: "0",
    boxImg: "/images/activity/tesouro/MysteriousBoxClose5.png",
    bonus: "1~77",
    disabled: true,
    tiers: [
      { bet: "20", prize: "1~77" },
      { bet: "1000", prize: "2~177" },
      { bet: "1200", prize: "3~277" },
      { bet: "2500", prize: "6~577" },
      { bet: "5000", prize: "10~777" },
      { bet: "50000", prize: "50~1777" },
      { bet: "100000", prize: "100~7777" },
    ],
  },
];
</script>

<style scoped lang="scss">
* {
  touch-action: manipulation;
}
.boxItem .top {
  padding: 0.32rem;
  background: var(--theme-color4);
  margin-bottom: 0.32rem;
  border-radius: 0.3rem;
}
.boxItem .head {
  padding: 0.37rem 0.76rem;
  background: var(--theme-color3);
  border-radius: 0.3rem;
  color: var(--theme-neutral2);
  text-align: left;
  font-size: 0.34rem;
  line-height: 0.4rem;
  border: 0.05rem solid var(--theme-color7);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
}
.boxItem .head > p:first-child span {
  color: var(--theme-dec1);
  font-size: 0.38rem;
  font-weight: 700;
}
.boxItem .head > p:nth-child(2) span {
  color: var(--theme-dec4);
  font-size: 0.38rem;
  font-weight: 700;
}
.boxItem .head .radio {
  width: 0.6rem;
  position: absolute;
  top: -0.05rem;
  right: -0.05rem;
}
.boxItem .body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.2rem;
  padding-bottom: 0.32rem;
}
.boxItem .body .title {
  width: 2rem;
  height: 0.7rem;
  background: var(--theme-neutral5);
  font-size: 0.44rem;
  color: var(--theme-neutral1);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
}
.boxItem .body .Base {
  width: 6.11rem;
  position: absolute;
  z-index: 1;
  top: 1.54rem;
  left: 50%;
  transform: translate(-50%);
}
.boxItem .body .box {
  width: 2.83rem;
  height: 2.83rem;
  margin-top: 0.47rem;
  margin-bottom: 0.8rem;
  position: relative;
  z-index: 2;
}
.boxItem .body .bouns {
  color: var(--theme-dec4);
  font-size: 0.54rem;
  margin-bottom: 0.26rem;
}
.boxItem .body .btn {
  width: 5.2rem;
  height: 1.2rem;
  border-radius: 0.3rem;
  background: var(--theme-color4);
  position: relative;
  color: var(--theme-neutral1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.54rem;
}
.boxItem .body .noCheck {
  background: var(--theme-neutral2) !important;
}
.boxItem .bottom {
  width: 100%;
  border-radius: 0.3rem;
  overflow: hidden;
}
.boxItem .bottom .tableHead {
  width: 100%;
  height: 1rem;
  font-size: 0.34rem;
  color: var(--theme-neutral1);
  background: linear-gradient(
    90deg,
    var(--theme-ts2-gradient1) 0%,
    var(--theme-ts2-gradient2) 100%
  );
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 0.32rem;
}
.boxItem .bottom .tableHead div {
  text-align: left;
}
.boxItem .bottom .tableBody {
  min-height: 3.3rem;
}
.boxItem .bottom .tableBody > div:nth-child(odd) {
  background-color: var(--theme-color9);
}
.boxItem .bottom .item {
  width: 100%;
  height: 1.1rem;
  font-size: 0.34rem;
  color: var(--theme-neutral1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 0.32rem;
}
.boxItem .bottom .item div {
  text-align: left;
}
.boxItem .bottom .item > div:nth-child(2) {
  color: var(--theme-dec4);
}
.arrow-img {
  position: absolute;
  top: 4.36rem;
  border-radius: 0.1rem;
  z-index: 9999; /* 增加z-index确保在最上层 */
  /* iOS Safari 特定修复 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* 确保在iOS上正确显示 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* 强制创建新的层叠上下文 */
  isolation: isolate;

  img {
    height: 0.77rem;
  }
}
.prev-img {
  left: 0.6rem;
  /* 确保左箭头在iOS上正确显示 */
  z-index: 10000;

  img {
    transform: rotate(180deg);
  }
}
.next-img {
  right: 0.6rem;
  /* 确保右箭头在iOS上正确显示 */
  z-index: 10000;
}
.content-box {
  position: relative;
  margin-top: 0.24rem;
  /* 确保正确的层叠上下文 */
  z-index: 1;

  :deep(.swp-item) {
    padding: 0 0.24rem;
  }
}
</style>
